-
Notifications
You must be signed in to change notification settings - Fork 2.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Fix useSubscription bug in React v18 StrictMode (#9664) #9707
Fix useSubscription bug in React v18 StrictMode (#9664) #9707
Conversation
@kazekyo: Thank you for submitting a pull request! Before we can merge it, you'll need to sign the Apollo Contributor License Agreement here: https://contribute.apollographql.com/ |
I don't know how to reduce the file size. Please let me know if there is anything I need to do 🙏 |
Also, no need to worry about the |
One more request, if you have time: if you can add a regression test (in this module) that fails without these changes, that will help us make sure we don't regress this behavior (without realizing it) in the future. |
I agree. I think the following test should be added: But I have two problems 😅 First, I upgraded React version to 18, but in this test, the component is not remounted even if StrictMode is enabled. So the test is always PASS. I do not know what reason this is occurring. Second, this test requires React v18. I do not know of any way to reproduce this situation other than using React v18 StrictMode.
Should we fix all the failed tests with this PR? |
It sounds like we need to start a React 18-only test suite, to accompany our existing React ≤17-compatible test suite. I can work on that today! |
React18 automatically unmounts and remounts components in StrictMode. When React remount a component, the previous state is restored. However, if the previous state is reused, the subscription will not work. So we should recreate the necessary object when React remounts the component.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We will find a way to properly test this code in multiple major versions of React, but that does not need to block shipping these changes. Thanks for your thoughtful analysis and for coming up with this solution @kazekyo!
c504248
to
e62f8f6
Compare
I think apollo-client has an issue when re-mounting subscription components without the This issue is reproducible on our open source desktop app |
Fix #9664
React18 automatically unmounts and remounts components in StrictMode. When React remount a component, the previous state is restored. However, if the previous state is reused, the subscription will not work.
So we should recreate the necessary object when React remounts the component.
For more information on why we should not reuse the object, see #9664 (comment)
Currently, Apollo Client includes React17 in its devDependencies.
I have made this fix and confirmed that it works in a sample application.
At this time, I changed Apollo Client's React version to 18.
But I confirmed that some unrelated tests failed due to the impact of updating React to 18, so I did not commit package.json.
Therefore, I have not included in this commit the additional tests needed to prove the fix in React18.